<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <!-- jq -->
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 模板引擎 -->
    <script src="./libs/template-web.js"></script>
    <!-- 导入日期插件文件 -->
    <script src="./libs/jedate/js/jedate.js"></script>
    <link rel="stylesheet" href="./libs/jedate/css/jeDate-test.css" />
    <link rel="stylesheet" href="./libs/jedate/css/jedate.css" />
    <!-- 导入富文本插件 -->
    <script src="./libs/wangEditor/wangEditor.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">文章发表</div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                class="form-control title"
                id="inputTitle"
                placeholder="文章标题文字"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img src="images/pic06.jpg" class="article_cover" />
              <input name="cover" type="file" id="inputCover" />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4">
              <select class="form-control category" name="categoryId">
                <option>类别一</option>
                <option>类别二</option>
                <option>类别三</option>
                <option selected>类别四</option>
                <option>类别五</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <!-- 准备日期插件容器 -->
              <div class="jeinpbox">
                <input
                  type="text"
                  class="jeinput"
                  id="testico"
                  placeholder="YYYY-MM-DD"
                  name="date"
                />
                <div class="icons jebtns"></div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div class="col-sm-10">
              <div id="div1">
                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-success btn-release">
                发布
              </button>
              <button type="submit" class="btn btn-default btn-draft">
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </body>
  <script src="./libs/https.js"></script>
  <script>
    $(function () {
      //给选择图片的input一个监听事件
      $("#inputCover").on("change", function (e) {
        e.preventDefault();
        let ingPic = URL.createObjectURL(this.files[0]);
        $("img.article_cover").attr("src", ingPic);
      });
      //发起Ajax请求
      $.ajax({
        method: "get",
        url: BigNew.category_list,
        success: function (backData) {
          // console.log(backData);
          if (backData.code == 200) {
            let htmlStr = "";
            $.each(backData.data, function (index, value) {
              htmlStr += `<option value='${value.id}'>${value.name}</option>`;
            });
            $(".category").html(htmlStr);
          }
        },
      });

      // 日期插件的点击事件
      $(".jebtns").on("click", function () {
        // jeDate('#testico', {
        //     trigger: false,
        //     format: 'YYY-MM-DD',

        // })
        jeDate("#testico", {
          trigger: false,
          format: "YYYY-MM-DD",
          theme: { bgcolor: "#1378f0", pnColor: "#FF6653" },
          zIndex: 10001,
        });
      });
      //插入富文本
      const E = window.wangEditor;
      const editor = new E("#div1");
      editor.create();

      // 由于上面两个点击事件都是一个借口,所以封装一个函数,通过不同的需求进行传参
      function setState(state) {
        let fd = new FormData(document.querySelector("form"));
        fd.append("state", state);
        fd.append("content", editor.txt.html());
        //发起请求
        $.ajax({
          method: "post",
          url: BigNew.article_publish,
          data: fd,
          contentType: false,
          processData: false,
          success: function (backData) {
            // console.log(backData);
            if (backData.code == 200) {
              alert(backData.msg);
              window.location = "./article_list.html";
              parent.$(".level02 li").eq(0).click();
            }
          },
        });
      }
      //给发布与编辑设定一个点击事件
      $(".btn-release").on("click", function (e) {
        e.preventDefault();
        setState("已发布");
      });
      $(".btn-draft").on("click", function (e) {
        e.preventDefault();
        setState("草稿");
      });
    });
  </script>
</html>
